<template>
  <div class="left-container">
    <el-form class="form-tool">
      <el-form-item class="padding-right-0 margin-bottom-0">
        <el-input v-model="filterText" placeholder="搜索名称" prefix-icon="el-icon-search" class="search-input">
        </el-input>
        <el-button title="刷新" class="btn-refresh" icon="el-icon-yrt-shuaxin" @click.native="treeRefresh"></el-button>
      </el-form-item>
      <el-form-item class="padding-left-0 padding-right-0 margin-bottom-0">
        <el-scrollbar :noresize="false" :native="false" wrap-class="tree scrollbar-wrap">
          <el-tree ref="tree" :data="treeData" :expand-on-click-node="false" :filter-node-method="filterTreeNode" :props="props" :default-expand-all="false" highlight-current node-key="bI_Id" @node-click="nodeClick">
            <span slot-scope="{ node, data }" class="custom-tree-node" @mouseover="() => treeNodeOver(node, data)" @mouseout="() => treeNodeOut(node, data)">
              <span>
                <i v-if="data.hasChild" class="el-icon-menu"></i>
                <i v-else class="el-icon-tickets"></i>
                {{ node.label }}({{ data.value || -1 }})
              </span>
              <span v-show="!hiddenTool && data==treeNodeOverItem" style="position:absolute;right:5px;top:0;">
                <el-button type="text" size="mini" title="复制" @click.stop="() => treeNodeCopy(node, data)">
                  <i class="el-icon-yrt-fuzhi" />
                </el-button>
                <el-button type="text" size="mini" title="添加子级" @click.stop="() => treeNodeAppend(node, data)">
                  <i class="el-icon-circle-plus-outline" />
                </el-button>
                <el-button type="text" size="mini" title="编辑" @click.stop="() => treeNodeEdit(node, data)">
                  <i class="el-icon-edit-outline" />
                </el-button>
                <el-button type="text" size="mini" title="删除" @click.stop="() => treeNodeRemove(node, data)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </span>
            </span>
          </el-tree>
        </el-scrollbar>
      </el-form-item>
    </el-form>

    <!--编辑模块对话框-->
    <el-dialog v-dialogDrag :visible.sync="isShowEditor" :title="editorTitle" width="500px" append-to-body>
      <el-form :model="formField" required label-width="90px">
        <el-form-item label="id">
          {{ formField.bI_Id }}
        </el-form-item>
        <el-form-item label="报表名称" required>
          <el-input v-model="formField.bIName" class="w-250" @blur="biNameChange" @change="biNameChange"></el-input>
        </el-form-item>
        <el-form-item label="报表名称" required>
          <el-input v-model="formField.reportFileName" class="w-250"></el-input>
        </el-form-item>
        <el-form-item label="父级ID" required>
          <el-input v-model="formField.parentId" class="w-250"></el-input>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input v-model="formField.orderNo" class="w-250"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveBI">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import eventBus from "@/utils/eventBus";
import { treeData } from "../data.js";

export default {
  name: "left-aside",
  components: {},
  props: {
    designer: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 隐藏工具栏
    hiddenTool: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      filterText: "",
      treeData: treeData,
      hasData: true,
      // 鼠标滑过Item
      treeNodeOverItem: {},
      // 鼠标选中Item
      currentTreeNode: null,
      // 记录修改前当前行名称
      currentOldLabel: null,

      props: {
        label: "label",
        children: "children",
        isLeaf: "isLeaf",
      },
      formField: {
        bI_Id: 0,
        bIName: "",
        reportFileName: "",
        parentId: 0,
        orderNo: 0,
      },
      // 显示编辑器
      isShowEditor: false,
      editorTitle: "新建模块",
      formSearch: {
        vueData_Id: null,
        table_Id: null,
        vueDataName: null,
        searchFields: "",
      },
    };
  },
  computed: {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {},
  methods: {
    // 获得左侧类目导航节点数据
    loadTreeNode(node, resolve) {
      this.currentTreeNode = null;
      var the = this;
      the.$nextTick(() => {
        var where = "";
        if (node.level === 0) {
          where = {
            parentId: 0,
          };
        } else {
          where = {
            parentId: node.data.bI_Id,
          };
        }

        var url = "/api/common/loadTreeNode";
        var params = {
          DBServer: "Sys",
          tableName: "Sys_BI",
          tableView: "Sys_BI",
          keyName: "bI_Id",
          nodeName: "bIName",
          fixHasChild: false,
          isBreakWay: false,
          displayBreakWay: false,
          parentName: "parentId",
          orderBy: "orderNo desc, bI_Id",
          where: where,
          extendColumns: "table_Id,vueData_Id,orderNo,vueData,reportFileName",
          folder: "sys/bi",
        };
        the.common.ajax(
          url,
          params,
          (res) => {
            if (res.result) {
              this.hasData = true;
              if (!this.hiddenTool && node.level === 0) {
                res.data.push({
                  bI_Id: -1,
                  hasChild: "1",
                  bIName: "[未使用节点]",
                });
              }
              res.data.forEach((element) => {
                element.label = element["bIName"];
                element.isLeaf = !element.hasChild;
              });
              resolve(res.data);
            } else {
              the.$message.error(res.msg);
            }
          },
          true
        );
      });
    },
    // 搜索导航
    filterTreeNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 点击tree导航节点
    nodeClick(data, node, el) {
      if (data.hasChild) {
        return;
      }
      this.currentTreeNode = data;
      const userInfo = this.common.getUserInfo();

      if (this.designer && this.designer.loadFile) {
        const file = `file:${userInfo.userProduct_Id}.${data.label}.ureport.xml`;
        this.designer.loadFile(file);
      }
      // 左侧导航改变事件
      eventBus.$emit("bi-left-node-change", { data, node });
    },
    // 刷新tree
    treeRefresh() {
      this.filterText = "";
      var root = this.$refs.tree.store.root;
      while (root.childNodes.length) {
        this.$refs.tree.remove(root.childNodes[0]);
      }
    },
    // tree鼠标进入
    treeNodeOver(node, data) {
      this.treeNodeOverItem = data;
    },
    // tree鼠标移出
    treeNodeOut(node, data) {
      this.treeNodeOverItem = {};
    },
    // 复制节点
    treeNodeCopy(node, data) {
      this.$prompt("请输入复制新报表名称", "复制报表", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          if (!value) {
            this.$message.error("名称不能为空");
            return;
          }

          const url = "/api/sys/bi/copyItem";
          const params = {
            id: data.value, // 当前ID
            value: value,
          };
          this.common.ajax(
            url,
            params,
            (res) => {
              this.common.showMsg(res);
              this.treeRefresh();
            },
            this.$refs["tree"]
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 新建节点
    treeNodeAppend(node, data) {
      this.isShowEditor = true;
      this.editorTitle = "新建报表";
      this.formField.bIName = "";
      this.formField.reportFileName = "";
      this.formField.parentId = 0;
      this.formField.bI_Id = 0;
      this.formField.orderNo = 0;
    },
    // 编辑节点
    treeNodeEdit(node, data) {
      this.isShowEditor = true;
      this.editorTitle = "编辑模块";
      this.formField.bIName = data.bIName;
      this.formField.reportFileName = data.reportFileName;
      this.formField.parentId = data.parentId;
      this.formField.bI_Id = data.bI_Id;
      this.formField.orderNo = data.orderNo;
    },
    // 删除
    treeNodeRemove(node, data) {
      this.$confirm("此操作将永久删除该模板, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var url = "/api/sys/bi/deleteItem";
          var params = {
            id: data.bI_Id,
          };
          this.common.ajax(
            url,
            params,
            (res) => {
              this.common.showMsg(res);
              this.treeRefresh();
            },
            true
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 保存BI
    saveBI() {
      if (!this.formField.bIName) {
        this.$message.error("名称不能为空");
        return;
      }

      var url = "/api/sys/bi/saveBI";
      var params = {
        formField: this.formField,
      };
      this.common.ajax(
        url,
        params,
        (res) => {
          this.common.showMsg(res);
          if (res.result) {
            this.isShowEditor = false;
            setTimeout(() => {
              this.treeRefresh();
            }, 500);
          }
        },
        true
      );
    },
    biNameChange() {
      const userInfo = this.common.getUserInfo();
      this.formField.reportFileName = `${userInfo.userProduct_Id}.${this.formField.bIName}.ureport.xml`;
    },
  },
};
</script>

<style lang="scss" scoped>
.left-container {
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 4px;
  .form-tool {
    padding-top: 10px;
    .el-form-item {
      padding: 0 10px;
    }
    .search-input {
      width: calc(100% - 45px);
    }
    .btn-search,
    .btn-refresh {
      padding: 10px;
    }
    .btn-refresh {
      margin-left: 0px;
    }
  }
  ::v-deep .el-tree-node.is-current > .el-tree-node__content {
    background-color: #a7ccf7;
    color: dodgerblue;
    .el-button--text {
      color: dodgerblue;
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    position: relative;
  }
  ::v-deep .tree.scrollbar-wrap {
    max-height: calc(100vh - 138px);
    overflow-x: hidden;
    padding: 10px 0px 20px;
    .el-tree {
      margin-bottom: 10px;
    }
  }
}
</style>
